<template>
  <view class="container">
    <tab-bar :currentPage="currentPage"></tab-bar>

    <!-- Top Section with User Info and Background Image -->
    <view class="user-info">
      <!-- User Info Header with Background Image and Icon -->
      <view class="user-header">
        <!-- User Title and Right-Side Message Icon -->
        <view></view>
        <text class="user-title">用户</text>
        <view class="message-icon-wrapper">
          <img
            class="message-icon"
            src="/static/user/message.png"
            alt="Message Icon"
          />
        </view>
      </view>

      <!-- User Avatar and Details -->
      <view class="user-content">
        <view class="user-details-wrapper">
          <u-avatar src="/static/user-avatar.png" size="80"></u-avatar>
          <!-- User Name, Gender, and Birthdate -->
          <view class="user-details">
            <!-- Name and Gender in the Same Row -->
            <view class="user-row">
              <text class="user-name">奎赛</text>
              <text class="user-gender">男</text>
            </view>
            <!-- Full Date on the Next Line -->
            <view class="user-birthdate">
              <text>1993-08-14</text>
            </view>
          </view>
          <!-- User Info Button -->
          <view class="user-info-right">
            <text>用户信息</text>
            <u-icon name="arrow-right" size="12" color="#fff"></u-icon>
          </view>
        </view>
      </view>
    </view>

    <!-- List Section Below User Info -->
    <view class="list-section-content">
      <view class="list-section">
        <!-- First Item: Text with Image -->
        <view class="list-item">
          <img
            class="item-icon"
            src="/static/user/origin.png"
            alt="Home Icon"
          />
          <text class="item-title">所属机构</text>
        </view>

        <!-- Second Item: Text with Image -->
        <view class="list-item">
          <img class="item-icon" src="/static/user/about.png" alt="Info Icon" />
          <text class="item-title">关于</text>
        </view>
      </view>
    </view>
    <view class="logout-section">
      <u-button @click="handleLogout" type="error">退出登录</u-button>
    </view>
  </view>
</template>

<script>
import tabBar from "../tabbar/tabbar.vue";
import { logout } from "@/common/api/req.js";
import { clearUserData } from "@/common/store.js";

export default {
  components: {
    tabBar,
  },
  data() {
    return {
      currentPage: 2, // Current page for tab-bar
    };
  },
  mounted() {
    uni.hideTabBar(); // Hides the default tab-bar
  },
  methods: {
    logout() {
      uni.clearStorage();
      uni.redirectTo({ url: "/" });
    },
    handleLogout() {
      uni.showModal({
        title: "提示",
        content: "确定要退出登录吗？",
        success: (res) => {
          if (res.confirm) {
            this.performLogout();
          }
        },
      });
    },

    performLogout() {
      logout()
        .then(() => {
          // 使用新的 clearUserData 方法清除所有用户相关数据
          clearUserData();

          // 显示退出成功提示
          uni.showToast({
            title: "退出登录成功",
            icon: "success",
            duration: 2000,
          });

          // 跳转到登录页面
          setTimeout(() => {
            uni.reLaunch({
              url: "/pages/common/login/login",
            });
          }, 2000);
        })
        .catch((error) => {
          console.error("退出登录失败:", error);
          uni.showToast({
            title: "退出登录失败，请重试",
            icon: "none",
            duration: 2000,
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
/* Main container */
.container {
  background-color: #f3f6fa;
  height: 100vh;
  width: 100%;
  box-sizing: border-box;
}
.user-content {
  width: 100%;
  bottom: 25%;
  left: 0;
  box-sizing: border-box;
  padding: 0 20px;
}

/* User info section with background */
.user-info {
  background-image: url("/static/index/header-bg.png");
  background-size: cover;
  background-position: center;
  height: 240px !important;
  padding: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Header part with title and message icon */
.user-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 10px;
}

.user-title {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
}

.message-icon-wrapper {
  position: relative;
}

.message-icon {
  width: 32px;
  height: 32px;
}

/* Avatar and user details */
.user-details-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.user-details {
  margin-left: 10px;
  color: #fff;

  display: flex;
  flex-direction: column;
}

/* Row for Name and Gender */
.user-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}

/* Left-aligned Name */
.user-name {
  text-align: left;
}

/* Right-aligned Gender */
.user-gender {
  text-align: right;
  font-size: 12px;
}

/* Birthdate on the Next Line */
.user-birthdate {
  margin-top: 5px;
  font-size: 12px;
  text-align: left;
}

/* User info button */
.user-info-right {
  display: flex;
  justify-content: end;
  align-items: center;
  width: 100%;
  padding: 0 10px;
  color: #fff;
  flex: 1;
  font-size: 12px;
}

/* List section below user info */
.list-section-content {
  position: absolute;
  width: 100%;
  box-sizing: border-box;
}
.list-section {
  background-color: #fff;
  border-radius: 12px;
  margin: 10px;
  padding: 10px;
  .item-title {
    color: #0d1444;
    font-size: 16px;
  }
  .item-icon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
  }
  .list-item {
    height: 56px;
    border-bottom: 1px solid #eee;
    line-height: 56px;
    display: flex;
    align-items: center;
  }
  :last-child {
    border-bottom: none;
  }
}
.logout-section {
  position: absolute;
  bottom: 150px;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  .logout-button {
    width: 100%;
    border-radius: 4px;
    font-size: 16px;
    height: 48px;
    line-height: 48px;
    background-color: #ff4d4f;
    color: #fff;
  }
}

/* Additional styles for responsiveness */
</style>
